<template>
  <div>
    <!-- 顶部 -->
    <van-search
      left=""
      v-model="value"
      background="#4fc08d"
      label="地址"
      placeholder="请输入小区或地址"
      show-action
    >
      <template #left>
        <div @click="onSearch">
          <van-icon name="arrow-left" size="20" color="#fff" />
        </div>
      </template>
      <template #action>
        <div @click="onSearch">
          <van-icon name="location-o" size="20" color="#fff" />
        </div>
      </template>
    </van-search>

    <!-- 列表 -->
    <van-card
      v-for="item in houseList"
      :key="item.houseCode"
      :price="item.price"
      :desc="item.desc"
      :title="item.title"
      thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
      @click="housesDetial(item.houseCode)"
    >
      <template #tags>
        <van-tag plain type="danger" color="#61bbca">近地铁</van-tag>
      </template>
    </van-card>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'FindHouse',
  data() {
    return {
      value: '',
      houseList: null,
    }
  },

  async created() {
    const { data } = await axios({ url: 'http://liufusong.top:8080/houses' })

    // console.log(data)
    this.houseList = data.body.list
    console.log(this.houseList)
  },

  methods: {
    onSearch() {
      // 顶部的左右按键的 点击事件
    },

    // 进入房屋详情
    housesDetial(code) {
     const infoArr = this.houseList.filter((item)=>{
        return item.houseCode === code
      })
      // console.log(infoArr);
      // console.log(code)
      this.$router.push(
        {
          name: 'detial',
          query: {
            infoArr,
          },
        },
        () => {}
      )
    },
  },
}
</script>

<style></style>
